<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <style>
        #page-wrapper h1 {
            display: block;
            margin-bottom: 20px;
            border-bottom: 1px solid #999;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }
        /*.form-control[disabled], fieldset[disabled] .form-control{ background: none; border: none; box-shadow: none;}*/
        .pro-type-tit{ display: inline-block; width: 22px; line-height: 22px; border-radius: 50%; margin-right: 10px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
    </style>
</head>
<body>

<div id="page-wrapper">
    <div class="panel panel-f5">
        <div class="panel-body row">
            <h1>● 基础信息</h1>
            <form id="Form" class="form-horizontal" method="post">
                <input type="hidden" id="_ctx" value="${basePath}"/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font
                            color="red">*</font>&nbsp;产品名称：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="name" maxlength="50" v-model="dataObj.name"
                               placeholder="最多输入50字" disabled>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">&nbsp;<font color="red">*</font>&nbsp;产品售价：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="price" maxlength="10" min="0.01" v-model="dataObj.price" disabled> 元
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">&nbsp;<font color="red">*</font>&nbsp;产品封面：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="obj-input" name="cover" v-model="dataObj.cover" type="text">
                        <img v-if="dataObj.cover" class="obj-img" :src="dataObj.cover" width="100" height="100">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">产品视频：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="hidden" id="fileValue" name="video" v-model="dataObj.video">
                        <video v-if="dataObj.video" id="fileName" :src="dataObj.video" controls="controls" style="max-height: 200px;">
                            您的浏览器不支持 video 标签。
                        </video>
                        <video v-else id="fileName" src="" controls="controls" style="display: none; max-height: 200px;">
                            您的浏览器不支持 video 标签。
                        </video>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">产品类型：</span>
                    <div class="col-sm-9 col-xs-8 porduct-type">
                        <label><input type="radio" name="productType" value="1" v-model="dataObj.productType" disabled> 代理商产品</label>
                        <label><input type="radio" name="productType" value="2" v-model="dataObj.productType" disabled> 权益产品</label>
                    </div>
                </div>
                <div class="form-group" v-if="dataObj.productType==2">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">选择权益产品：</span>
                    <div class="col-sm-9 col-xs-8">
                        <select class="form-control" name="cardId" v-model="dataObj.cardId" disabled>
                            <option v-for="item in cardArr" :value="item.id">{{item.name}}</option>
                        </select>
                    </div>
                </div>
                <h1>● 详细描述</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">产品介绍：</span>
                    <div class="col-sm-9 col-xs-8 add-box image-text">
                        <div class="text-box" v-for="item in dataObj.productImageTextDtos">
                            <div v-if="item.type==1">
                                <textarea data-id="0" name='detailImages[0].path' maxlength="200" rows="3"
                                          cols="50" class="form-control" placeholder="最多输入200字" v-text="item.path" disabled></textarea>
                                <input class="sort" name='detailImages[0].sort' value="0" type="hidden"/>
                                <input name='detailImages[0].type' value="1" type="hidden"/>
                            </div>
                            <div v-if="item.type==2" class="upload-box">
                                <input class="obj-input" name="detailImages[1].path" :value="item.path" type="hidden">
                                <img class="obj-img" :src="item.path">
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font
                            color="red">*</font>&nbsp;合同名称：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="officeName" maxlength="50"
                               placeholder="最多输入50字" v-model="dataObj.contractName" disabled>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                            color="red">*</font>&nbsp;上传合同：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" id="fileText" class="form-control" size="50" v-model="dataObj.contractUrl" disabled />
                    </div>
                </div>
                <hr/>
                <div class="form-group">
					<span class="control-label col-sm-2 col-xs-4 detail-span"><span
                            class="text-red"></span> 备注：</span>
                    <div class="col-sm-10 col-xs-8 add-box">
                        <div class="text-box">
                            <textarea data-id="0" name='remark' id="remark" v-text="dataObj.remark"
                                      class="form-control" maxlength="1000" placeholder="最多输入1000字" disabled></textarea>
                        </div>
                    </div>
                </div>

                <h1>● 产品内容</h1>
                <div class="pro-box" v-for="(item, index) in dataObj.productProjectDtos">
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><b class="pro-type-tit" v-html="index+1"></b>类型：</span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" name="proType" v-model="item.projectId" disabled>
                                <option v-for="item in proType" :value="item.id" v-text="item.name"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;数量：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" name="proNum" v-model="item.containNum" disabled>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId==10">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;规格：</span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" name="proSpec" v-model="item.specId" disabled>
                                <option v-for="item in proSpec" :value="item.motorcycleId" v-text="item.motorcycleName"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId==10 || item.projectId==9 || item.projectId==11">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;有效期设置：</span>
                        <div class="col-sm-9 col-xs-8">
                            自购买日起 <input type="text" class="form-control" name="period" v-model="item.intervalDays" placeholder="留空为立即生效" disabled> 天生效，
                            有效期 <input type="text" class="form-control" name="periodDay" v-model="item.validTime" disabled> 天
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"></span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" name="proSeries" v-model="item.type" disabled>
                                <option value="0">固定项</option>
                                <option value="1">单选项</option>
                            </select>
                        </div>
                    </div>
                </div>

                <h1>● 其他设置</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">分享标签图：</span>
                    <div class="col-sm-9 col-xs-8">
                        <img v-if="dataObj.sharePhone" class="obj-img" :src="dataObj.sharePhone" width="100" height="100">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">分享标题：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="shareTit" maxlength="50" v-model="dataObj.shareTitle"
                               placeholder="请用简洁的文字描述标题" disabled>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">标签内容：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="shareInstr" maxlength="10" placeholder="请用简洁语言描述标签分享的内容" v-model="dataObj.shareContent" disabled>
                    </div>
                </div>

                <hr>
                <div class="form-group">
                    <span class="control-label col-sm-4 col-xs-4"></span>
                    <div class="col-sm-8 col-xs-8">
                        <button type="button" class="btn btn-info" @click="goBack"><i class="fa fa-close"></i>返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
<script>
    var vue = new Vue({
        el: "#page-wrapper",
        data: {
            proIndex: 2, //产品类型数量
            proType: [],
            proSpec: [],
            dataObj: {
                productType: 1,
                carId: null,
                name: "",
                price: "",
                cover: "",
                video: "",
                detailImages: [
                    {
                        type: 1,
                        sort: 1,
                        path: ''
                    }
                ],
                officeName: "",
                office: "",
                remark: "",
                curType: [1,3],
                proNum: [],
                curSpec: [0,1],
                period: [],//有效期
                periodDay: [],
                proSeries: [0,1],//固定、单选项

                shareImg: "",//分享信息
                shareTit: "",
                shareInstr: ""

            }

        },
        created: function () {
            var _this = this;
            //var id = '${agentProductDto.id}';
            var cur = window.location.href.split("/");
            var id = cur[cur.length-1];
            //获取权益产品
            $.ajax({
                url: '${basePath}/admin/agent/product/incrementList',
                type: 'GET',
                dataType: 'json',
                data: {},
                success: function (data) {
                    if(data.result.length){
                        console.log(123)
                        _this.cardArr = data.result;
                        if(!id){
                            _this.dataObj.carId = data.result[0].id;
                        }
                    }
                }
            })
            if (id) {
                $.ajax({
                    url: '${basePath}/admin/agent/product/queryProductById',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        id: id
                    },
                    success: function (data) {
                        if(data.result){
                            _this.dataObj = data.result;
                        }
                    },
                    error: function () {
                        console.log("error")
                    }
                })
            }

            //获取类型
            $.ajax({
                url: '${basePath}/admin/agent/product/typeList',
                type: 'GET',
                dataType: 'json',
                data: {},
                success: function(data){
                    _this.proType = data.result.baseProductList;
                    _this.proSpec = data.result.motorcycleList;
                },
                error: function(){
                    console.log("error")
                }
            })
        },
        methods: {
            goBack: function(){
                window.location.href = "${basePath}/admin/agent/product";
            }
        }
    })

</script>
</body>
</html>
